<template>
  <a-drawer
    :maskClosable="true"
    width="80%"
    placement="right"
    :closable="false"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
    title="新增工单"
    style="height: calc(100% - 55px); overflow: auto; padding-bottom: 53px"
  >
    <!-- 头部信息 -->
    <a-form-model
      layout="horizontal"
      ref="ruleForm"
      :model="formInfo"
      :label-col="$global.labelCol"
      :wrapper-col="$global.wrapperCol"
    >
      <!-- 内容区域 -->
      <div class="content-wrapper">
        <!-- 管理信息表单 -->
        <div class="management-form">
          <!-- 管理信息模块 -->
          <div style="margin-bottom: 15px; overflow: hidden">
            <a-row :gutter="24">
              <a-col>
                <a-form-model-item
                  label="工单类型："
                  :rules="$valid.required"
                  prop="workOrderType"
                >
                  <a-radio-group
                    v-model="formInfo.workOrderType"
                    style="line-height: 35px"
                  >
                    <a-radio
                      v-for="item in this.$sysDictOptions('workOrderType')"
                      :key="item.k"
                      :value="item.k"
                      >{{ item.v }}</a-radio
                    >
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>

        <!-- 设备信息表单 -->
        <div class="management-form">
          <!-- 设备信息模块 -->
          <div class="info-module">
            <div class="module-header">
              <div class="module-title">设备信息</div>
            </div>
            <div class="form-content">
              <div v-if="archiveEquipment.id">
                <div class="device-card">
                  <div class="card-header">
                    <div class="button-group">
                      <!-- @click="replaceDevice" -->
                      <!--  -->
                      <a-button class="btn-replace" @click="replaceDevice"
                        >更换设备</a-button
                      >
                      <a-button class="btn-remove" @click="removeDevice"
                        >移除设备</a-button
                      >
                    </div>
                  </div>
                  <div class="device-info">
                    <div class="info-item1">
                      <div style="display: inline">
                        {{ archiveEquipment.deviceShortCode }}
                      </div>
                      <div style="margin-left: 20px; display: inline">
                        {{ archiveEquipment.deviceName }}
                      </div>
                    </div>
                    <div class="info-item2">
                      <div style="display: inline">使用科室:</div>
                      <div style="margin-left: 4px; display: inline">
                        {{ archiveEquipment.usingDepartmentIdNames }}
                      </div>
                      <div style="margin-left: 20px; display: inline">
                        当前位置:
                      </div>
                      <div style="margin-left: 4px; display: inline">
                        {{ archiveEquipment.currentLocationNames }}
                      </div>
                    </div>
                  </div>

                  <div class="radio-group">
                    <div class="radio-item">
                      <span class="radio-label">是否停机：</span>
                      <a-radio-group v-model="formInfo.isMachineStop">
                        <a-radio value="0">否</a-radio>
                        <a-radio value="1">是</a-radio>
                      </a-radio-group>

                      <span class="radio-label" style="margin-left: 50px"
                        >是否有备用机：</span
                      >
                      <a-radio-group v-model="formInfo.isBackupAvailable">
                        <a-radio value="1">有</a-radio>
                        <a-radio value="0">无</a-radio>
                      </a-radio-group>
                    </div>
                  </div>
                </div>
              </div>
              <a-row :gutter="24" v-else>
                <a-col :span="12">
                  <a-form-model-item
                    label="设备名称："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="$valid.required"
                    prop="archiveEquipmentId"
                  >
                    <a-button
                      @click="handleArchiveEquipment"
                      style="
                        margin: 10px;
                        margin: 10px;
                        width: 80px;
                        font-size: 12px;
                        height: 25px;
                      "
                      type="delault"
                      size="small"
                      v-wx-role="120101"
                      >关联设备</a-button
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>

      <!-- 报修信息表单 -->
      <div class="management-form">
        <!-- 报修信息模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">报修信息</div>
          </div>
          <div class="form-content">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-model-item
                  label="报修人："
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="$valid.required"
                  prop="repairerId"
                >
                  <a-select
                    :showArrow="true"
                    :allowClear="true"
                    v-model="formInfo.repairerId"
                    placeholder="请选择报修人"
                    @change="forceUpdate"
                  >
                    <a-select-option
                      v-for="item in createByList"
                      :key="item.companyId + ''"
                      :value="item.companyId + ''"
                    >
                      {{ item.companyName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-input
                    v-model="formInfo.repairerPhone"
                    placeholder="请输入报修人手机号"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-model-item
                  label="报修地点："
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="$valid.required"
                >
                  <a-cascader
                    v-model="formInfo.repairLocationss"
                    :options="campusBuildingFloorRoomTree"
                    :change-on-select="false"
                    expand-trigger="click"
                    placeholder="请选择报修位置"
                    @change="forceUpdate"
                  ></a-cascader>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-input
                    v-model="formInfo.repairAddress"
                    placeholder="请输入详细地址"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col>
                <a-form-model-item
                  label="报修科室："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="$valid.required"
                >
                  <a-tree-select
                    v-model="formInfo.repairDepartmentIds"
                    style="width: 100%"
                    :treeCheckStrictly="true"
                    allow-clear
                    :tree-data="departmentTree"
                    placeholder="请选择报修科室"
                    @change="forceUpdate"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>

      <!-- 故障信息表单 -->
      <div class="management-form">
        <!-- 故障信息模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">故障信息</div>
          </div>
          <div class="form-content">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-model-item
                  label="紧急度："
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="$valid.required"
                  prop="repairerId"
                >
                  <a-radio-group
                    v-model="formInfo.urgency"
                    style="line-height: 35px"
                  >
                    <a-radio
                      v-for="item in this.$sysDictOptions('urgency')"
                      :key="item.k"
                      :value="item.k"
                      >{{ item.v }}</a-radio
                    >
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-model-item
                  label="是否加急："
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="$valid.required"
                  prop="repairerId"
                >
                  <a-radio-group
                    v-model="formInfo.isUrgent"
                    style="line-height: 35px"
                  >
                    <a-radio
                      v-for="item in this.$sysDictOptions('isUrgent')"
                      :key="item.k"
                      :value="item.k"
                      >{{ item.v }}</a-radio
                    >
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col>
                <a-form-model-item
                  label="故障现象："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-tree-select
                    v-model="formInfo.faultPhenomenons"
                    style="width: 100%"
                    tree-checkable
                    :treeCheckStrictly="true"
                    allow-clear
                    :tree-data="faultPhenomenonTree"
                    placeholder="与[故障说明]至少填一项"
                    @change="forceUpdate"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col>
                <a-form-model-item
                  label="故障说明："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-input
                    type="textarea"
                    v-model="formInfo.faultDescription"
                    placeholder="与[故障现象]至少填一项"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col>
                <a-form-model-item
                  label="语音描述："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-input
                    type="textarea"
                    v-model="formInfo.phoneticDescription"
                    placeholder="请在微信端中操作"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col>
                <a-form-model-item
                  label="照片："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <w-image-upload
                    class="avatar-uploader"
                    text="上传"
                    :multipleFlag="true"
                    v-model="formInfo.image"
                    bizPath="electronicSignature"
                  ></w-image-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" v-if="formInfo.workOrderType == '4'">
              <a-col>
                <a-form-model-item
                  label="故障分类："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-input
                    type="textarea"
                    v-model="formInfo.faultClassification"
                    placeholder="请输入故障分类"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" v-if="formInfo.workOrderType == '4'">
              <a-col>
                <a-form-model-item
                  label="故障程度："
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                >
                  <a-radio-group
                    v-model="formInfo.degreeMalfunction"
                    style="line-height: 35px"
                  >
                    <a-radio
                      v-for="item in this.$sysDictOptions('degreeMalfunction')"
                      :key="item.k"
                      :value="item.k"
                      >{{ item.v }}</a-radio
                    >
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
      <!-- END故障信息 -->
    </a-form-model>
    <div
      style="
        display: flex;
        margin-top: 10%;
        justify-content: flex-end;
        font-size: 12px;
      "
    >
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: 0.8rem; width: 75px">取消</a-button>
      </a-popconfirm>

      <a-button
        @click="handleSubmit"
        type="primary"
        style="width: 75px"
        :loading="confirmLoading"
        >保存</a-button
      >

      <!-- <div style="margin-bottom: 5%"></div> -->
    </div>
    <a-drawer
      :maskClosable="true"
      width="70%"
      placement="right"
      :closable="false"
      @close="archiveEquipmentClose"
      :destroyOnClose="true"
      :visible="archiveEquipmentOpen"
      title="关联设备"
      style="height: calc(100% - 55px); overflow: auto; padding-bottom: 53px"
    >
      <dev-archive-equipment-list
        @ok="archiveEquipmentOk"
        @close="archiveEquipmentClose"
        ref="archiveEquipmentRef"
      ></dev-archive-equipment-list>
    </a-drawer>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import { getAction, postAction } from '@/api/manage'
import { getDepartTree, getCompanyList } from '@/api/api'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import DevArchiveEquipmentList from '../DevArchiveEquipmentList.vue'

export default {
  name: 'DevArchiveEquipmentEdit',
  components: {
    WImageUpload,
    DevArchiveEquipmentList,
  },
  computed: {},
  data() {
    return {
      faultPhenomenonTree: [],
      // 当前激活的标签页
      campusBuildingFloorRoomTree: [],
      departmentTree: [],
      // 设备基本信息
      deviceInfo: {
        createTime: undefined,
        maintenanceType: undefined,
        archiveEquipmentId: undefined,
        repairerId: undefined,
        repairerPhone: undefined,
        repairLocation: undefined,
        repairAddress: undefined,
        repairDepartmentId: undefined,
        faultPhenomenon: undefined,
        faultDescription: undefined,
        image: undefined,
        urgency: undefined,
        isUrgent: undefined,
        workOrderNumber: undefined,
        workOrderSource: undefined,
        isRepair: undefined,
        internalExternalRepair: undefined,
        internalMaintenanceManager: undefined,
        responseTime: undefined,
        maintenanceDuration: undefined,
        maintenanceCycle: undefined,
        phoneticDescription: undefined,
        maintenanceMethod: undefined,
        faultType: undefined,
        reasonMalfunction: undefined,
        maintenanceLevel: undefined,
        expectedCompletionTime: undefined,
        repairDescription: undefined,
        repairPictureImage: undefined,
        repairManufacturer: undefined,
        maintenanceContactPerson: undefined,
        maintenanceContactPhone: undefined,
        estimatedAmount: undefined,
        estimatedRemarks: undefined,
        estimatedFile: undefined,
        estimatedImage: undefined,
        amountTotal: undefined,
        wx: '',
      },
      confirmLoading: false,
      url: {
        saveInfo: '/system/devMaintenance/save',
        getInfo: '/system/devMaintenance/info',
        getFaultPhenomenonTree: '/system/devMaintenanceFaultPhenomenon/tree',
        getCampusBuildingFloorRoomTree:
          '/system/devCampusBuildingFloorRoom/listTree',
        getArchiveEquipmentList: '/system/devArchiveEquipment/info',
      },
      // 编辑状态
      archiveEquipmentOpen: false,
      visible: false,
      formInfo: {},
      createByList: [],
      archiveEquipment: {
        id: undefined,
      },
    }
  },
  created() {
    this.getUserList()
    this.getCampusBuildingFloorRoom()
    //使用科室
    this.getDepartment()
    this.getFaultPhenomenon()
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate()
    },
    //故障现象
    getFaultPhenomenon() {
      getAction(this.url.getFaultPhenomenonTree, {}).then((res) => {
        this.faultPhenomenonTree = res.result.data
      })
    },
    archiveEquipmentOk(val) {
      this.archiveEquipmentOpen = false
      console.log('archiveEquipmentOk>>', val)
      this.getArchiveEquipmentList(val)
    },
    getArchiveEquipmentList(id) {
      getAction(this.url.getArchiveEquipmentList, { id: id }).then((res) => {
        this.archiveEquipment = res.result.data
        this.formInfo.archiveEquipmentId = res.result.data.id
      })
    },

    archiveEquipmentClose() {
      this.archiveEquipmentOpen = false
    },
    handleArchiveEquipment() {
      this.archiveEquipmentOpen = true
    },
    //移除设备
    replaceDevice() {
      this.handleArchiveEquipment()
    },
    //移除设备
    removeDevice() {
      this.archiveEquipment = {}
      this.formInfo.archiveEquipmentId = undefined
    },

    //位置
    getCampusBuildingFloorRoom() {
      getAction(this.url.getCampusBuildingFloorRoomTree).then((res) => {
        this.campusBuildingFloorRoomTree = res.result.data
      })
    },

    //使用科室
    getDepartment() {
      getDepartTree().then((res) => {
        this.departmentTree = res.result.data
      })
    },

    getUserList() {
      // 加载数据方法 必须为 Promise 对象
      var parameter = { pageNo: 1, pageSize: 1000000 }
      getCompanyList(Object.assign(parameter, this.queryParam)).then((res) => {
        this.createByList = res.result.data.records
      })
    },
    getCreateByName(text) {
      var obj = this.createByList.filter(
        (aa) => aa.companyId + '' == text + ''
      )[0]
      if (obj == null) {
        if (text) {
          return '系统管理员'
        } else {
          return '--'
        }
      }
      return obj.companyName
    },

    add() {
      this.visible = true
      this.formInfo = {}
      this.edit()
    },

    moment,
    edit(record) {
      this.$objToOverride(this.formInfo, record)

      if (this.formInfo.id) {
        getAction(this.url.getInfo, { id: record.id }).then((res) => {
          this.$nextTick(() => {
            this.deviceInfo = res.result.data
            this.getArchiveEquipmentList(res.result.data.archiveEquipmentId)

            if (this.deviceInfo.repairLocations != null) {
              this.deviceInfo.repairLocationss =
                this.deviceInfo.repairLocations.split(',')
            }

            if (this.deviceInfo.repairDepartmentId) {
              this.deviceInfo.repairDepartmentIds =
                this.deviceInfo.repairDepartmentId
            }

            if (this.deviceInfo.faultPhenomenon) {
              var faultPhenomenons = this.deviceInfo.faultPhenomenon.split(',')
              var faultPhenomenonList = []
              faultPhenomenons.forEach((faultPhenomenon) => {
                faultPhenomenonList.push({ value: faultPhenomenon })
              })

              this.deviceInfo.faultPhenomenons = faultPhenomenonList
            }
          })
        })
      }
      this.visible = true
    },
    // 确定
    handleSubmit() {
      // 触发表单验证
      this.confirmLoading = true
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          //报修科室
          // if (this.formInfo.repairDepartmentIds) {
          //   this.formInfo.repairDepartmentId = JSON.stringify(
          //     this.formInfo.repairDepartmentIds
          //   )
          // }
          //故障现象
          if (this.formInfo.faultPhenomenons) {
            this.formInfo.faultPhenomenon = JSON.stringify(
              this.formInfo.faultPhenomenons
            )
          } else {
            if (!this.formInfo.faultDescription) {
              this.$message.error('请选择故障现象或填写故障说明任意一项')
              this.confirmLoading = false
              return
            }
          }
          //报修位置
          if (this.formInfo.repairLocationss) {
            this.formInfo.repairLocations = this.formInfo.repairLocationss + ''
          }
          postAction(this.url.saveInfo, this.formInfo)
            .then((res) => {
              this.$message.success(res.content)
              this.$emit('ok', this.formInfo)
              this.close()
            })
            .finally(() => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    editorOk(val) {
      this.formInfo.content = val
    },
  },
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  background-color: #f0f2f5;
  color: #333;
  padding: 20px;
}
.device-container {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.device-header {
  /* background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); */
  /* color: white; */
  /* padding: 16px 24px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.device-info {
  display: flex;
  align-items: center;
  gap: 24px;
}
.device-name {
  font-size: 21px;
  font-weight: 600;
}
.device-id {
  font-size: 18px;
}
.device-status {
  display: flex;
  gap: 16px;
  margin-top: 0px;
}
.status-tag {
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 12px;
  width: 50px;
  height: 25px;
  line-height: 14px;
}
.fault-status {
  background: #ff4d4f;
}
.no-warranty {
  background: #faad14;
}
.record-info {
  font-size: 14px;
  margin-left: 50%;
}

/* 标签页样式 */
.tabs-container {
  padding: 0 24px;
}
.ant-tabs-bar {
  margin-bottom: 0;
}
.ant-tabs-tab {
  padding: 16px 24px !important;
  font-size: 16px;
  font-weight: 500;
}

/* 内容区域 */
.content-wrapper {
  /* padding: 24px; */
  /* display: flex; */
}
.management-form {
  flex: 1;
  padding-right: 24px;
  margin-bottom: -40px;
}
.industry-info {
  width: 400px;
  padding-left: 24px;
  overflow-y: auto;
}

/* 模块样式 */
.info-module {
  margin-bottom: 30px;
  /* background: #fafafa; */
  border-radius: 6px;
  /* border: 1px solid #e8e8e8; */
  overflow: hidden;
}
.module-header {
  padding: 12px 24px;
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.module-title {
  font-weight: 600;
  font-size: 16px;
}
.module-actions {
  display: flex;
  gap: 10px;
  margin-left: 15px;
}
.form-content {
  padding: 24px;
}

/* 表单样式 */
.ant-form-item {
  margin-bottom: 18px;
}
.ant-form-item-label {
  padding-right: 10px;
}
.ant-form-item-label label {
  color: #595959;
}
.ant-input,
.ant-select-selector {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

/* 行业信息样式 */
.industry-card {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 24px;
}
.industry-card-header {
  background: #e6f7ff;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
}
.industry-card-title {
  font-weight: 600;
  color: #1890ff;
}
.industry-card-body {
  padding: 16px;
}
.industry-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f0f0f0;
}
.industry-item-title {
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
}
.industry-item-value {
  color: #595959;
  padding-left: 12px;
}

.ant-input[disabled] {
  margin-top: 3px;
  background-color: #fff !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.65) !important;
  cursor: not-allowed;
}
.ant-input {
  padding-left: 5px;
}

.span-line-height {
  line-height: 38px;
}

/* * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
      padding: 20px;
    } */

.container {
  max-width: 1200px;
  width: 100%;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 28px;
  color: #1890ff;
  margin-bottom: 10px;
}

.header p {
  color: #606266;
  font-size: 16px;
}

.device-card {
  background: white;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  margin-left: 30px;
}

.btn-replace {
  color: #1890ff;
  border-color: #1890ff;
  width: 80px;
  font-size: 12px;
  height: 25px;
}

.btn-remove {
  color: #ff4d4f;
  border-color: #ff4d4f;
  width: 80px;
  font-size: 12px;
  height: 25px;
}

.device-id {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.device-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 8px 0;
  letter-spacing: 0.5px;
}

.device-model {
  background: #f0f7ff;
  padding: 8px 12px;
  border-radius: 6px;
  color: #1890ff;
  font-size: 15px;
  border-left: 3px solid #1890ff;
  margin: 15px 0;
}

.device-info {
  margin: 18px 28px;
  border: 1px solid #eeeeee;
  height: 90px;
  border-radius: 3px;
  display: grid;
}

.info-item1 {
  margin-top: 1%;
  margin-left: 15px;
  font-size: 12px;
  width: 100%;
}
.info-item2 {
  margin-top: -4%;
  margin-left: 15px;
  font-size: 12px;
  width: 100%;
}

.info-label {
  color: #606266;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #303133;
  font-weight: 500;
  flex: 1;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
}

.radio-item {
  align-items: center;
  text-align: center;
}

.radio-label {
  color: #606266;
  width: 120px;
  font-size: 14px;
}

.footer {
  text-align: center;
  margin-top: 35px;
  color: #909399;
  font-size: 14px;
  padding-top: 15px;
  border-top: 1px solid #e8e8e8;
}
</style>
